/* 全局样式 */
body {
    background-color: #f5f7fb;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.9rem;
    color: #343a40;
}

/* 导航栏样式 */
.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
}

/* 卡片样式 */
.card {
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* 表格样式 */
.table th {
    border-top: none;
    font-weight: 600;
    color: #6c757d;
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.05);
}

/* 按钮样式 */
.btn {
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary {
    background: #007BFF;
    border-color: #007BFF;
}

.btn-primary:hover {
    background: #0056b3;
    border-color: #0056b3;
    transform: translateY(-1px);
}

.btn-outline-primary {
    color: #007BFF;
    border-color: #007BFF;
}

.btn-outline-primary:hover {
    background: #007BFF;
    border-color: #007BFF;
    color: white;
}

/* 表单标签样式 */
.form-label {
    font-weight: 500;
    color: #343a40;
    margin-bottom: 0.5rem;
}

/* 表单控件样式 */
.form-control, .form-select {
    border: 1px solid #e1e5eb;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
}

.form-control:focus, .form-select:focus {
    border-color: #007BFF;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.15);
}

/* 选项卡导航按钮样式 */
.nav-tabs .nav-link {
    color: #6c757d;
    font-weight: 500;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: 0.75rem 1.5rem;
    transition: all 0.2s ease;
}

.nav-tabs .nav-link:hover {
    color: #007BFF;
    border-color: #e1e5eb #e1e5eb #dee2e6;
    background-color: #f8f9fa;
}

.nav-tabs .nav-link.active {
    color: #007BFF;
    background-color: #ffffff;
    border-color: #e1e5eb #e1e5eb transparent;
    font-weight: 600;
    border-bottom: 1px solid white;
}

/* 特定于测试用例模态框的样式增强 - 使用商务蓝色 */
#addTestCaseModal .modal-header {
    background: linear-gradient(135deg, #007BFF 0%, #0052cc 100%);  /* 商务蓝色渐变 */
    color: white;
    border-radius: 12px 12px 0 0;
}

#addTestCaseModal .modal-header .modal-title {
    color: white;
}

#addTestCaseModal .modal-footer {
    background-color: #f8f9fa;
    border-radius: 0 0 12px 12px;
}

/* 模态框中的表单控件样式 */
#addTestCaseModal .form-label {
    font-weight: 500;
    color: #212529;
    margin-bottom: 0.5rem;
}

#addTestCaseModal .form-text {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

#addTestCaseModal .form-control {
    background-color: #ffffff;
    color: #212529;
    border: 1px solid #e1e5eb;
}

#addTestCaseModal .form-control:focus {
    color: #212529;
    background-color: #ffffff;
    border-color: #007BFF;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.15);
}

/* 修复被选中文本样式 */
::selection {
    background-color: #007BFF;
    color: #ffffff;
}

/* 页脚样式 */
.footer {
    margin-top: auto;
    background-color: #f8f9fa;
    padding: 2rem 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    .table-responsive {
        font-size: 0.875rem;
    }
}

/* 动画效果 */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 加载动画 */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 标签样式 */
.badge {
    border-radius: 12px;
    padding: 0.35em 0.65em;
}

/* 卡片标题样式 */
.card-title {
    font-weight: 600;
    color: #343a40;
}

/* 页面标题 */
.page-title {
    font-weight: 600;
    color: #343a40;
    font-size: 1.8rem;
}

/* 全局样式 - #2A5DCF 配色方案 */
body {
    background-color: #f8fafc; /* 柔和蓝色调背景 */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.9rem;
    color: #2d3748; /* 深灰蓝文字 */
}

/* 导航栏样式 */
.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
}

/* 卡片样式 */
.card {
    border: none;
    box-shadow: 0 4px 12px rgba(42, 92, 207, 0.08);
    transition: all 0.3s ease;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    background-color: white;
}

.card:hover {
    box-shadow: 0 8px 24px rgba(42, 92, 207, 0.15);
    transform: translateY(-2px);
}

/* 表格样式 */
.table th {
    border-top: none;
    font-weight: 600;
    color: #1a3a8f; /* 深一些的蓝色 */
    background-color: #e6f0ff; /* 美观的单色背景 */
    padding: 0.75rem 0.6rem; /* 减少内边距以缩小宽度 */
    border-bottom: 2px solid #b8d4ff; /* 统一的底部边框 */
    text-transform: uppercase; /* 转换为大写 */
    font-size: 0.8rem; /* 稍微小点的字体 */
    letter-spacing: 0.5px; /* 字母间距 */
}

.table-hover tbody tr:hover {
    background-color: rgba(42, 92, 207, 0.03);
}

/* 特殊表格样式 - 工作节点管理 */
#workersTable th {
    background-color: #e6f0ff; /* 美观的单色背景 */
    color: #1a3a8f; /* 深一些的蓝色 */
    border-bottom: 2px solid #b8d4ff;
}

/* 特殊表格样式 - 测试用例管理 */
#testCasesTable th {
    background-color: #e6f0ff; /* 美观的单色背景 */
    color: #1a3a8f; /* 深一些的蓝色 */
    border-bottom: 2px solid #b8d4ff;
}

/* 表格复选框样式 */
.table th input[type="checkbox"] {
    cursor: pointer;
}

/* 按钮样式 */
.btn {
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.btn-primary {
    background: #2A5DCF; /* 深蓝色 */
    border-color: #2A5DCF;
}

.btn-primary:hover {
    background: #1E4CA6;
    border-color: #1E4CA6;
    transform: translateY(-1px);
}

.btn-outline-primary {
    color: #2A5DCF;
    border-color: #2A5DCF;
}

.btn-outline-primary:hover {
    background: #2A5DCF;
    border-color: #2A5DCF;
    color: white;
}

/* 表单标签样式 */
.form-label {
    font-weight: 500;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

/* 表单控件样式 */
.form-control, .form-select {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
    background-color: #ffffff;
    color: #2d3748;
}

.form-control:focus, .form-select:focus {
    border-color: #2A5DCF;
    box-shadow: 0 0 0 0.25rem rgba(42, 92, 207, 0.15);
}

/* 选项卡导航按钮样式 */
.nav-tabs .nav-link {
    color: #718096;
    font-weight: 500;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.75rem 1.5rem;
    transition: all 0.2s ease;
}

.nav-tabs .nav-link:hover {
    color: #2d3748;
    border-color: #e2e8f0 #e2e8f0 #edf2f7;
    background-color: #f7fafc;
}

.nav-tabs .nav-link.active {
    color: #2A5DCF;
    background-color: transparent;
    border-color: #e2e8f0 #e2e8f0 #ffffff;
    font-weight: 600;
    border-bottom: 2px solid #2A5DCF;
}

/* 特定于测试用例模态框的样式增强 - #2A5DCF 主题 */
#addTestCaseModal .modal-header {
    background: linear-gradient(135deg, #2A5DCF 0%, #1E4CA6 100%);  /* 深蓝色渐变 */
    color: white;
    border-radius: 12px 12px 0 0;
}

/* 测试用例选择区域：限制为大约 4.5 行卡片高度，超出显示滚动条 */
.testcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
    max-height: calc((2.25rem + 0.75rem) * 4.5); /* 估算每行高度并限制为4.5行 */
    overflow: auto;
    padding: 0.5rem;
}

/* Execution plan layout */
.override-box {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
}
.plan-left { min-width: 0; }
.plan-right { min-width: 160px; }
.run-mode-note { font-size: 0.75rem; color: #6c757d; }

/* fio 预览区域稍微增加高度，给命令多两行的空间 */
.fio-preview-expanded {
    max-height: 320px !important; /* 原来约260px，增加两行空间 */
}

/* Fix for test case filters layout (prevent label/select overlap) */
#testCaseFilters .form-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
    line-height: 1.1;
}

/* Test case list: limit height inside modal so controls below remain visible */
#testCaseList {
    max-height: 520px; /* larger modal: show more items without requiring additional clicks */
    overflow-y: auto;
    padding: 0.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}

/* Execution plan snake/grid styles */
.plan-grid { display:block; }
.plan-row { display:flex; gap:0.75rem; margin-bottom:0.75rem; align-items:flex-start; }
.plan-row.reverse { direction: rtl; }
.plan-row.reverse .plan-step-card { direction: ltr; }
.plan-step-card { flex: 1 1 220px; min-width: 120px; max-width: 360px; display:flex; flex-direction:column; }
.plan-thumb { border-radius:6px; border:1px solid #eef3ff; padding:0.25rem; background:#fff; box-shadow:0 3px 8px rgba(15,45,95,0.03); }
.plan-step-card .run-mode-select { width:100%; }
.plan-step-card .move-up, .plan-step-card .move-down { display:none; }
.plan-step-card .drag-handle { cursor: grab; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:6px; background:rgba(37,99,235,0.06); color:#1d4ed8; }
.plan-step-card .drag-handle:active { cursor:grabbing; }

@media (max-width: 768px) {
    .plan-row { flex-wrap:wrap; }
    .plan-step-card { flex: 1 1 48%; }
}

/* compact density styles */
.plan-grid.compact .plan-row { gap:0.4rem; margin-bottom:0.45rem; }
.plan-grid.compact .plan-step-card { min-width:100px; flex:1 1 120px; }
.plan-grid.compact .plan-thumb { padding:0.18rem; border-radius:6px; font-size:0.86rem; }

/* Execution plan connectors and drag markers */
.plan-list { position: relative; }
.plan-connectors { position: absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; }
.plan-step-card.dragging { opacity: 0.6; transform: scale(0.98); box-shadow: 0 8px 20px rgba(29,78,216,0.12); }
.insert-marker { position:absolute; z-index:50; border-radius:2px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }

/* debug visual: subtle outline to quickly see the plan-list area */
.plan-list { outline: 1px dashed rgba(29,78,216,0.06); }

/* ensure modal-xxl is wide enough */
.modal-xxl .modal-dialog {
    max-width: 1400px;
}

.testcase-card {
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
}

.testcase-card .card-body {
    padding: 0.6rem 0.75rem;
}

/* selected testcase card visual */
.testcase-card.selected {
    border: 1px solid rgba(42,92,207,0.25);
    box-shadow: 0 6px 18px rgba(42,92,207,0.08);
    background: linear-gradient(180deg, #ffffff, #f7fbff);
}

/* ensure only visual selected mark shows */
.testcase-card .form-check-input {
    display: none; /* hide checkbox visually; selection controlled by card click */
}

/* input-group icon on right: ensure matching padding */
.input-group .input-group-text {
    background: transparent;
    border-left: none;
}

/* show more button at the bottom of the list */
.show-more-container {
    text-align: center;
    margin-top: 0.5rem;
}
.show-more-btn {
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 0.9rem;
}

/* Search input removed from UI; no visual search icon styles necessary */

/* visually-hidden count remains for screen readers only */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* make the modal-footer sticky when modal height limited (improves visibility of next/submit) */
.modal-wizard .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
}

/* Enhanced styling for filter dropdowns to look modern and compact */
/* container for test case filter controls */

#testCaseFilters .col-auto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#testCaseFilters .form-select.form-select-sm {
    /* compact height while preserving readable padding */
    font-size: 0.88rem;
    padding: 0.45rem 1.25rem 0.45rem 0.9rem; /* room on the right for custom caret */
    height: calc(1.6rem + 0.9rem);
    border-radius: 10px;
    /* stronger border and white background to contrast with page bg */
    border: 1px solid #343a40; /* deep gray to match theme and provide strong contrast */
    background-color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    /* remove native arrow and use custom SVG caret */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231A3A8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
    transition: box-shadow 0.18s ease, transform 0.12s ease, border-color 0.12s ease;
}

#testCaseFilters .form-select.form-select-sm:hover {
    box-shadow: 0 6px 18px rgba(26,58,143,0.06);
    transform: translateY(-1px);
}

#testCaseFilters .form-select.form-select-sm:focus {
    border-color: #2A5DCF;
    box-shadow: 0 6px 24px rgba(42,92,207,0.12);
    outline: none;
}

/* make the clear button visually lighter and aligned */
#clearTestCaseFilters {
    height: calc(1.6rem + 0.9rem);
    padding: 0.35rem 0.7rem;
    border-radius: 10px;
}

@media (max-width: 576px) {
    #testCaseFilters .col-auto {
        width: 100%;
    }
    #testCaseFilters .form-select.form-select-sm {
        width: 100%;
    }
}

/* Micro-adjust: align label and select on medium+ screens for compactness */
@media (min-width: 768px) {
    #testCaseFilters .col-auto {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    #testCaseFilters .col-auto .form-label {
        margin-bottom: 0;
        width: 88px;
        text-align: right;
        padding-right: 10px;
        font-size: 0.85rem;
        color: #37477a;
    }
    #testCaseFilters .col-auto .form-select.form-select-sm {
        margin-left: 0;
        flex: 0 0 auto;
        width: auto;
    }
}

/* Slightly smaller select height for tighter UI */
#testCaseFilters .form-select.form-select-sm {
    height: 38px;
    padding-top: 0.32rem;
    padding-bottom: 0.32rem;
}

/* stronger focus indicator and subtle left accent when focused */
#testCaseFilters .form-select.form-select-sm:focus {
    border-color: #1e4ca6;
    box-shadow: 0 8px 30px rgba(30,76,166,0.08);
}
#testCaseFilters .form-select.form-select-sm:focus {
    outline: none;
}

#testCaseFilters .form-select.form-select-sm:focus {
    /* left accent bar - simulated with box-shadow inset */
    box-shadow: inset 4px 0 0 rgba(42,92,207,0.12), 0 8px 30px rgba(30,76,166,0.08);
}

#testCaseFilters .form-select {
    min-width: 7.5rem;
    max-width: 18rem;
    padding: 0.45rem 0.6rem;
    box-sizing: border-box;
    display: block;
}

#testCaseFilters .row > .col-auto {
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-width: 9rem; /* ensure enough room for label + select */
    margin-right: 0.75rem;
}

@media (max-width: 576px) {
    #testCaseFilters .row {
        gap: 0.6rem;
    }
    #testCaseFilters .row > .col-auto {
        width: 100%;
        align-items: stretch;
    }
    #testCaseFilters .form-select { width: 100%; }
}

/* Extra safety: ensure labels do not overlay selects due to negative margins */
#testCaseFilters .form-label, #testCaseFilters .form-select { position: relative; z-index: 1; }

#addTestCaseModal .modal-header .modal-title {
    color: white;
}

#addTestCaseModal .modal-footer {
    background-color: #f7fafc;
    border-radius: 0 0 12px 12px;
}

/* ===== 额外视觉优化: 字体、间距、卡片、拖拽句柄、模态向导宽度 ===== */
/* 更舒适的基准字号与行高 */
html, body {
    font-size: 16px; /* 0.9rem 原基于 16px 的近似值 */
    line-height: 1.45;
}

/* 统一正文与标题字体权重 */
.page-title {
    font-size: 1.9rem;
    letter-spacing: -0.2px;
}
.card-title {
    font-size: 1.05rem;
}

/* 模态宽度优化（向导使用） */
.modal-wizard .modal-dialog {
    max-width: 920px;
    width: calc(100% - 48px);
}
.modal-wizard .modal-body {
    padding: 1.25rem 1.5rem;
}

/* worker / task config 卡片样式提升 */
.worker-card, .task-config-card {
    display: block;
    padding: 0.9rem;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    box-shadow: 0 6px 18px rgba(42,92,207,0.05);
    border: 1px solid rgba(42,92,207,0.04);
    margin-bottom: 0.9rem;
}

.worker-card .worker-meta {
    font-size: 0.92rem;
    color: #4a5568;
}

/* 防止右侧控件折行并减少占用空间 */
.worker-card .form-check-input.worker-checkbox { width:16px; height:16px; margin:0; border-radius:4px; }
/* 紧凑模式 */
.worker-card.compact { padding:0; border-radius:8px; }
.worker-card.compact .card-body { padding:0.4rem 0.65rem !important; }
.worker-card.compact .worker-name { max-width:140px; display:inline-block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.worker-card.compact .ip { font-size:0.72rem; }
/* 极简行式 Worker 卡片网格 */
.worker-grid-compact { display:grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap:8px; }
.worker-card.simple { position:relative; background:#fff; border:1px solid #e5e9f2; border-radius:8px; padding:6px 8px; box-shadow:0 2px 4px rgba(30,41,59,0.04); transition:background .15s,border-color .15s,box-shadow .15s; cursor:pointer; }
.worker-card.simple:hover { background:#f8fafc; border-color:#dce3ed; }
.worker-card.simple.selected { border-color:#2563eb; box-shadow:0 0 0 1px #2563eb33,0 4px 10px -2px rgba(37,99,235,0.15); }
.worker-card.simple .wk-row { display:grid; grid-template-columns: auto 1fr; grid-template-rows:auto auto; column-gap:6px; row-gap:2px; align-items:center; }
.worker-card.simple .status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.worker-card.simple .worker-name { font-size:0.82rem; font-weight:600; line-height:1; grid-column:2 / 3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* （已移除批量操作下拉后清理）
    原 .worker-selection-toolbar / .dropdown-menu.small 样式删除以减少冗余 */
.worker-card.simple .ip { font-size:0.68rem; color:#64748b; line-height:1; grid-column:2 / 3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.worker-card.simple .worker-checkbox { grid-column:1 / 2; grid-row:1 / 3; align-self:center; margin:0; width:14px; height:14px; }
.worker-card.simple .select-mark { position:absolute; top:4px; right:6px; width:16px; height:16px; background:#2563eb; color:#fff; border-radius:50%; font-size:10px; display:none; align-items:center; justify-content:center; }
.worker-card.simple.selected .select-mark { display:flex; }

/* Global + overrides configuration panel */
.global-worker-config { background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; }
.global-worker-config input { font-family: monospace; }
.overrides-wrapper { border:1px solid #e2e8f0; border-radius:8px; padding:8px 10px; background:#ffffff; }
.overrides-list { display:flex; flex-direction:column; gap:6px; max-height:220px; overflow:auto; }
.override-row { display:grid; grid-template-columns: 110px 1fr auto; gap:8px; align-items:center; background:#f9fafb; border:1px solid #edf2f7; border-radius:6px; padding:6px 8px; transition:background .15s,border-color .15s; }
.override-row:hover { background:#f1f5f9; border-color:#dfe6ee; }
.override-row .ov-worker { font-size:0.72rem; font-weight:600; color:#334155; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.override-row input { font-family: monospace; font-size:0.72rem; height:28px; padding:2px 6px; }
.override-row button { font-size:0.65rem; }
.worker-card.has-override .worker-name::after { content:'★'; color:#f59e0b; margin-left:4px; font-size:0.6rem; }
.overrides-wrapper.collapsed #workerOverridesList { display:none; }
.overrides-wrapper.collapsed #collapseOverridesBtn::after { content:'(已折叠)'; margin-left:4px; font-size:0.65rem; color:#64748b; }

/* 防止批量按钮折行并保持紧凑 */
.btn { white-space: nowrap; }
.btn .badge { white-space: nowrap; }

/* 按钮与徽章美化 */
.btn-outline-secondary {
    color: #4b5563;
    border-color: #e6e9ef;
}
.btn-outline-secondary:hover {
    background: #f1f5f9;
}
.badge.bg-secondary {
    background: #eef2ff;
    color: #243665;
    font-weight: 600;
    padding: 0.2rem 0.45rem;
    border-radius: 8px;
}

/* In testcase cards, show W#D# badges without the colored oval background so they read as inline labels
   and do not conflict with the IO-mode (green) badge which is intentionally highlighted. */
.testcase-card .badge.bg-secondary {
    /* W/D badge: visible soft blue pill to emphasize worker/thread counts */
    background: rgba(26,58,143,0.08) !important; /* soft blue */
    color: #0f3460 !important; /* dark blue text */
    font-weight: 700;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    box-shadow: none;
    margin-right: 6px;
}

/* 测试用例摘要与占位样式 (label removed from UI; styles kept elsewhere if needed) */
.placeholder-option {
    color: #9aa6c7;
}

/* 拖拽手柄样式 */
.drag-handle {
    cursor: grab;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(42,92,207,0.06);
    color: #2a5dcf;
    font-size: 18px;
    margin-right: 10px;
    user-select: none;
}
.drag-handle:active {
    cursor: grabbing;
    transform: scale(0.98);
}

/* 淡出移除动画（用于移除覆盖卡片） */
.fade-out {
    animation: fadeOut 0.22s ease forwards;
}
@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0px); }
    to { opacity: 0; transform: translateY(-6px); }
}

/* 加速 collapse 过渡以更流畅 */
.collapse {
    transition: height 0.18s ease;
}

/* 配置区视觉分层 */
.task-config-card .config-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}
.task-config-card .config-body {
    margin-top: 0.4rem;
}
.task-config-card .form-control, .task-config-card .form-select {
    font-size: 0.92rem;
}

/* 代码/JSON 输入区更醒目 */
.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
    font-size: 0.88rem;
    background: #f7f9fc;
    border: 1px solid #e6eefc;
    padding: 0.75rem;
    border-radius: 8px;
}

/* 按钮与表单的小尺寸变体用于向导底部 */
.btn-sm-custom {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
    border-radius: 8px;
}

/* 细微的视觉过渡与聚焦 */
.worker-card:focus-within, .task-config-card:focus-within {
    outline: 2px solid rgba(42,92,207,0.08);
    transform: translateY(-2px);
}

/* 更明显的键盘聚焦指示，用于无障碍 */
.testcase-card.selected {
    border-color: rgba(25,135,84,0.6);
    background: linear-gradient(90deg, rgba(25,135,84,0.03), rgba(25,135,84,0.01));
}

/* Worker 卡片：对齐测试用例卡片视觉风格 */
.worker-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.worker-card { position:relative; border:1px solid #eef6ff; border-radius:10px; padding:0.6rem 0.75rem; background:#fff; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; cursor:pointer; }
.worker-card:hover { transform:translateY(-3px); box-shadow:0 6px 18px rgba(26,59,121,0.06); }
.worker-card .set-override { position:absolute; bottom:6px; right:6px; background:#2563eb; color:#fff; border:none; border-radius:14px; padding:2px 10px 3px; font-size:0.62rem; letter-spacing:0.5px; font-weight:600; cursor:pointer; opacity:0.92; box-shadow:0 2px 4px rgba(37,99,235,0.25); transition:background .15s, opacity .15s, transform .15s; line-height:1.1; }
.worker-card .set-override:hover { background:#1d4ed8; opacity:1; }
.worker-card.selected .set-override { background:#1d4ed8; box-shadow:0 2px 6px rgba(29,78,216,0.35); }
.worker-card .set-override:active { transform:scale(.94); }
.worker-card .set-override:focus { outline:2px solid #1d4ed8; outline-offset:1px; }
.override-row.flash { animation: xfioFlash 1.2s ease-in-out; }
@keyframes xfioFlash { 0% { background:#fff8e1; } 50% { background:#ffe7a3; } 100% { background:transparent; } }
.worker-card.selected { border-color:rgba(25,135,84,0.6); background:linear-gradient(90deg, rgba(25,135,84,0.03), rgba(25,135,84,0.01)); }
.worker-card .worker-checkbox { display:none; }
.worker-card h6 { font-size:1rem; line-height:1.2; margin:0 0 0.25rem 0; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; max-height:calc(1.2em * 2); }
.worker-card .meta { font-size:0.72rem; color:#64748b; display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.worker-card .meta span { background:#f1f5f9; color:#273449; font-weight:600; padding:0.18rem 0.4rem; border-radius:999px; white-space:nowrap; font-size:0.65rem; }
.worker-card .wk-head { display:flex; align-items:flex-start; gap:4px; margin-bottom:4px; padding-right:28px; }
.worker-card .wk-name { flex:1; font-size:0.86rem; font-weight:600; margin:0; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.worker-card .badge-status { font-size:0.52rem; text-transform:uppercase; padding:2px 5px 2px; border-radius:5px; background:#e2e8f0; color:#334155; font-weight:700; letter-spacing:.5px; line-height:1; position:relative; top:2px; }
.worker-card .badge-status[data-status="online"], .worker-card .badge-status[data-status="healthy"] { background:#dcfce7; color:#166534; }
.worker-card .badge-status[data-status="busy"] { background:#fef9c3; color:#92400e; }
.worker-card .badge-status[data-status="offline"], .worker-card .badge-status[data-status="dead"] { background:#fee2e2; color:#991b1b; }
.worker-card .wk-sub { display:flex; flex-wrap:nowrap; align-items:center; gap:8px; font-size:0.63rem; color:#64748b; overflow:hidden; margin-bottom:4px; }
.worker-card .wk-foot { display:flex; align-items:center; gap:8px; font-size:0.55rem; min-height:18px; }
.worker-card .wk-foot .wk-path-hint { font-size:0.55rem; color:#475569; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.worker-card .wk-foot .wk-path-hint em { font-style:normal; color:#2563eb; font-weight:600; }
.worker-card .wk-ip { font-weight:600; color:#475569; flex:0 0 auto; }
.worker-card .wk-res { background:#f1f5f9; color:#334155; font-weight:600; padding:2px 6px; border-radius:6px; font-size:0.58rem; line-height:1; flex:0 0 auto; letter-spacing:.5px; }
.worker-card .wk-path-hint { flex:1 1 auto; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.worker-card .wk-path-hint em { font-style:normal; color:#2563eb; font-weight:600; }
/* Wizard progress styles */
.wizard-steps .progress { background:#e6eefc; }
.wizard-steps .progress-bar { background: linear-gradient(90deg,#2563eb,#1d4ed8); }
.wizard-steps small.text-primary { color:#1d4ed8 !important; }
.wizard-steps .fw-semibold { font-weight:800; font-size:1.02rem; }
/* 更高优先级的规则，确保 <small> 元素能被放大和加粗 */
.wizard-steps small.fw-semibold { font-weight:800 !important; font-size:1.08rem !important; transform:translateY(-1px); }
.wizard-steps small.fw-semibold .step-check { margin-left:8px; }
.wizard-steps .step-check { display:inline-block; width:16px; height:16px; margin-left:6px; vertical-align:middle; border-radius:50%; background:transparent; box-shadow:none; }
.wizard-steps .step-check.done { background:#16a34a; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20 6L9 17l-5-5"/></svg>') center/contain no-repeat; -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20 6L9 17l-5-5"/></svg>') center/contain no-repeat; }
.wizard-steps .progress-bar { transition: width .35s ease; }
/* 移除独立的勾选徽记，使用选中边框 + 背景表达状态 */
/* 通用选择对勾标记（testcase & worker 共用基础样式） */
.select-mark { position:absolute; top:8px; right:8px; width:24px; height:24px; background:#2A5DCF; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; box-shadow:0 4px 10px rgba(0,0,0,0.15); opacity:0; transform:scale(.7); transition:.16s ease; }
.testcase-card .select-mark { background:#198754; }
.testcase-card.selected .select-mark, .worker-card.selected .select-mark { opacity:1; transform:scale(1); }
.worker-card .select-mark { background:#2A5DCF; }

/* testcase checkbox & short badge */
.testcase-checkbox {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 8px;
    right: 10px;
    margin: 0;
}
.testcase-card .card-body { padding-right: 48px; }
.testcase-card .badge.bg-light {
    /* file/block-size badge: subtle light pill background */
    background: #f1f5f9;
    color: #273449;
    font-weight: 600;
    padding: 0.18rem 0.4rem;
    border-radius: 999px;
}
/* Truncate test case title to fit card width.
   Use a 2-line clamp with ellipsis; falls back to max-height based clipping.
   Targets the common h6 used for test case names and any .card-title. */
.testcase-card h6, .testcase-card .card-title {
    margin-bottom: 0.25rem;
    font-size: 1rem;
    line-height: 1.2;
    /* multiline ellipsis (WebKit/Blink + modern browsers) */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* limit to 2 lines */
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal; /* allow wrapping up to clamp */
    /* fallback: enforce max height equal to 2 lines */
    max-height: calc(1.2em * 2);
    word-break: break-word;
}

/* On very narrow viewports, reduce to 1-line to keep layout compact */
@media (max-width: 420px) {
    .testcase-card h6, .testcase-card .card-title {
    -webkit-line-clamp: 1;
    line-clamp: 1;
        max-height: calc(1.2em * 1);
    }
}
/* Ensure all badges in testcase row don't wrap and keep consistent background */
.testcase-card .mt-1 { display:flex; gap:8px; align-items:center; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling: touch; }
.testcase-card .mt-1 .badge { display:inline-flex; align-items:center; white-space: nowrap; word-break: keep-all; flex: 0 0 auto; }
.badge-param { display:inline-flex; align-items:center; white-space: nowrap; word-break: keep-all; font-weight:600; font-size:0.85rem; flex: 0 0 auto; }

/* Make io-mode badge visually consistent with other badges but emphasize text color */
.testcase-card .badge-status {
    background: #f1f5f9; /* same as other badges */
    color: #1e4ca6; /* blue text to indicate mode */
    font-weight: 700;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
}
.badge-param { white-space: nowrap; font-weight:600; font-size:0.85rem; flex: 0 0 auto; }
.testcase-card .badge-status {
    /* make IO-mode badges visually distinct: soft green background with darker green text */
    background: rgba(34,139,34,0.08); /* soft green */
    color: #1f7a1f; /* darker green text */
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    font-weight: 700;
    margin-right: 6px;
    text-transform: capitalize; /* Present as 'Read', 'Rand', etc. */
}

/* 让卡片在可点击时显示手型光标 */
.worker-card { cursor: pointer; }

/* 更友好的标签与徽章 */
.badge-status {
    background: rgba(42,92,207,0.08);
    color: #1e4ca6;
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
    font-weight: 600;
    font-size: 0.78rem;
}

/* 小屏幕优化：减少左右边距并保持卡片可读性 */
@media (max-width: 576px) {
    .worker-card, .task-config-card {
        padding: 0.65rem;
    }
    .drag-handle {
        width: 30px; height: 30px; font-size: 16px; margin-right: 8px;
    }
}

/* 选中 Worker 卡片的视觉效果 */
.worker-card.selected {
    border: 1px solid rgba(42,92,207,0.18);
    background: linear-gradient(180deg, #f4f8ff, #ffffff);
    box-shadow: 0 8px 20px rgba(42,92,207,0.06);
}

/* 焦点与选择标识 */
.worker-card {
    position: relative;
}
.worker-card:focus {
    outline: 2px solid rgba(42,92,207,0.12);
    box-shadow: 0 6px 18px rgba(42,92,207,0.06);
}
.select-mark {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2A5DCF;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    transition: transform 0.12s ease, opacity 0.12s ease;
    opacity: 0;
    transform: scale(0.8);
}
.worker-card.selected .select-mark {
    opacity: 1;
    transform: scale(1);
}


/* 模态框中的表单控件样式 */
#addTestCaseModal .form-label {
    font-weight: 500;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

#addTestCaseModal .form-text {
    font-size: 0.85rem;
    color: #718096;
    margin-top: 0.25rem;
}

#addTestCaseModal .form-control {
    background-color: #ffffff;
    color: #2d3748;
    border: 1px solid #e2e8f0;
}

#addTestCaseModal .form-control:focus {
    color: #2d3748;
    background-color: #ffffff;
    border-color: #2A5DCF;
    box-shadow: 0 0 0 0.25rem rgba(42, 92, 207, 0.15);
}

/* 修复被选中文本样式 */
::selection {
    background-color: #2A5DCF;
    color: #ffffff;
}

/* 页脚样式 */
.footer {
    margin-top: auto;
    background-color: #f8fafc;
    padding: 2rem 0;
    color: #718096;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    .table-responsive {
        font-size: 0.875rem;
    }
}

/* 动画效果 */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 加载动画 */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 标签样式 */
.badge {
    border-radius: 12px;
    padding: 0.35em 0.65em;
}

/* 卡片标题样式 */
.card-title {
    font-weight: 600;
    color: #2d3748;
}

/* Worker card improvements for step 2 */
.worker-card {
    position: relative;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    padding-right: 0.5rem;
}
.worker-card .form-check-input.worker-checkbox {
    width: 1.1rem;
    height: 1.1rem;
}
.worker-card.selected {
    border: 1px solid rgba(42,92,207,0.18);
    box-shadow: 0 6px 18px rgba(42,92,207,0.06);
    transform: translateY(-2px);
}
.worker-card .select-mark {
    position: absolute;
    top: 8px;
    right: 10px;
    background: #2A5DCF;
    color: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    display: none;
}
.worker-card.selected .select-mark { display: flex; }
.worker-card .drag-handle {
    cursor: grab;
    font-size: 1rem;
    user-select: none;
}

/* 页面标题 */
.page-title {
    font-weight: 600;
    color: #2d3748;
    font-size: 1.8rem;
}

/* 侧边栏样式 - #2A5DCF 配色方案 */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 260px;
    background: linear-gradient(160deg, #2A5DCF 0%, #1E4CA6 100%); /* 深蓝色渐变 */
    color: white;
    z-index: 1000;
    box-shadow: 4px 0 30px rgba(42, 92, 207, 0.3);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    background-clip: padding-box;
}

.sidebar-header {
    padding: 2.4rem 1rem; /* a bit taller to give breathing room */
    border-bottom: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center; /* center brand horizontally */
    justify-content: center;
}

/* Sidebar brand/header - compact, balanced typography for 'xFio' */
.sidebar-header h3 {
    margin: 0;
    font-weight: 800;               /* slightly bolder for logo prominence */
    font-size: 1.9rem;             /* larger logo text */
    line-height: 1;
    letter-spacing: -0.02em;       /* slightly tighten letters for a cohesive word */
    color: white;
    display: inline-flex;
    align-items: center;            /* center icon + text */
    gap: 0.4rem;
    text-align: center;
}

.sidebar-header h3 i {
    font-size: 1.15em;               /* slightly reduced to match smaller brand icon */
    margin: 0;
    color: rgba(255,255,255,0.98);
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transform: none;
}

/* Brand accent for the 'F' in xFio: keep color emphasis but match metrics */
.brand-f {
    color: #e11d48;
    font-weight: 800;
    font-size: 0.95em;                /* slightly smaller so F doesn't overpower */
    display: inline-block;
    transform: translateY(0);      /* reset nudge: baseline alignment handled by container */
    line-height: 1;
    letter-spacing: 0;             /* reset spacing for accented letter */
    padding: 0 0.06rem;            /* small horizontal padding to avoid crowding */
}

/* Ensure the brand word renders as a single, controlled unit: disable kerning/ligatures
   and force consistent letter spacing so 'io' doesn't collapse or expand unexpectedly. */
.brand-word {
    font-kerning: none;
    -webkit-font-feature-settings: "kern" 0, "liga" 0, "clig" 0;
    -moz-font-feature-settings: "kern" 0;
    font-feature-settings: "kern" 0, "liga" 0, "clig" 0;
    letter-spacing: 0.01em; /* tighter spacing for a cleaner wordmark */
    display: inline-block;
    vertical-align: text-bottom; /* align baseline to icon bottom */
    font-weight: 700; /* slightly less heavy than before for balance */
}

/* Reintroduced inline SVG brand icon */
.brand-icon { 
        display:inline-flex; 
        align-items:flex-end; 
        justify-content:center; 
        width:1.35rem; 
        height:1.35rem; 
        line-height:1; 
        margin-right:0.32rem; 
        position:relative; 
        top:0.08rem; /* push icon slightly down to sit on baseline visually */
}
.brand-icon .xfio-logo-svg { width:100%; height:100%; display:block; }
.brand-icon .disk { fill:rgba(255,255,255,0.18); }
.brand-icon .bolt { fill:#ffc857; }
@supports (filter: drop-shadow(0 0 2px rgba(0,0,0,0.4))) {
    .brand-icon .bolt { filter: drop-shadow(0 0 2px rgba(0,0,0,0.35)); }
}

/* subtle pulse for the bolt to hint activity (prefers-reduced-motion respected) */
@media (prefers-reduced-motion: no-preference) {
    .brand-bolt.pulse {
        /* disable pulsing by default for a more professional static mark; keep class available */
        animation: none;
    }
    @keyframes boltPulse {
        0%,100% { transform: translateY(-0.06rem) scale(1.05); }
        50% { transform: translateY(-0.12rem) scale(1.12); }
    }
}

/* Navigation icon + text alignment inside sidebar */
.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: rgba(255,255,255,0.92);
}

.sidebar-nav .nav-link i {
    width: 1.25rem;                /* fixed icon width for consistent alignment */
    text-align: center;
    line-height: 1;
    vertical-align: middle;
    font-size: 1rem;
    color: rgba(255,255,255,0.95);
}

.sidebar-header p {
    margin: 0.4rem 0 0;
    opacity: 0.85;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.95);
}

.sidebar-nav {
    padding: 1rem 0;
    overflow-y: auto;
    height: calc(100vh - 80px);
}

.nav-item {
    margin: 0.2rem 0;
}

.nav-link {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
    background: rgba(255, 255, 255, 0.08);
    margin: 0 0.75rem;
    border-radius: 0 8px 8px 0;
}

.nav-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.15);
    border-left: 4px solid #8CB0FF; /* 浅蓝色高亮 */
    transform: translateX(3px);
}

.nav-link.active {
    color: white;
    background: rgba(255, 255, 255, 0.2);
    border-left: 4px solid white;
    font-weight: 600;
    transform: translateX(3px);
}

.nav-link i {
    width: 20px;
    margin-right: 12px;
    font-size: 1.1rem;
}

/* 主内容区域 */
.main-content {
    margin-left: 260px;
    padding: 2rem;
    min-height: 100vh;
    background: #f8fafc; /* 柔和蓝色调背景 */
    color: #2d3748; /* 深灰蓝文字 */
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0; /* 柔和边框色 */
}

/* Execution Plan Styles */
.plan-clean-list {
    padding-left: 0;
    list-style: none;
}

.plan-step-item {
    cursor: move;
    user-select: none;
    transition: background-color 0.2s ease;
}

.plan-step-item:hover {
    background-color: #f8f9fa;
}

/* Reorder arrow buttons enhanced hover/focus */
.plan-step-item .btn-outline-secondary {
    --reorder-btn-bg: #ffffff;
    background: var(--reorder-btn-bg);
    border-color: #cbd5e1;
    color: #475569;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.plan-step-item .btn-outline-secondary:hover:not(:disabled),
.plan-step-item .btn-outline-secondary:focus-visible:not(:disabled) {
    background: #1d4ed8;
    color: #fff;
    border-color: #1d4ed8;
    box-shadow: 0 0 0 2px rgba(29,78,216,0.25);
}
.plan-step-item .btn-outline-secondary:active:not(:disabled) {
    background: #153eaa;
    border-color: #153eaa;
    color: #fff;
}
.plan-step-item .btn-outline-secondary:disabled {
    opacity: .45;
    background: #f1f5f9;
    color: #94a3b8;
    border-color: #e2e8f0;
}

.plan-step-item.dragging {
    opacity: 0.5;
    transform: rotate(5deg);
}

.insert-marker {
    background-color: #007bff;
    height: 2px;
    margin: 0;
    position: relative;
    z-index: 1000;
}